<template>
  <Dialog title="结果" v-model="dialogVisible">
    <el-row>
      <el-col :span="12">
        <el-text class="mx-1" type="success">成功:{{ data.successCount }} </el-text>
      </el-col>
      <el-col :span="12">
        <el-text class="mx-1" type="danger"> 失败:{{ data.failCount }}</el-text>
      </el-col>
    </el-row>
    <el-table :data="data.list">
      <el-table-column
        v-for="(value, key) in data.labelMap"
        :key="key"
        :label="value"
        :prop="key"
        show-overflow-tooltip
      />
    </el-table>
  </Dialog>
</template>

<script setup lang="ts" name="GenerateResultTableDialog">
const dialogVisible = ref(false) // 弹窗的是否展示
const data = ref({
  labelMap: {},
  list: [],
  successCount: 0,
  failCount: 0
})

/** 打开弹窗 */
const open = (label, res) => {
  reset()
  dialogVisible.value = true
  data.value.labelMap = label
  data.value.list.push(...res.failList)
  data.value.list.push(...res.successList)
  data.value.failCount = res.failList.length
  data.value.successCount = res.successList.length
}

const reset = () => {
  data.value = {
    labelMap: {},
    list: []
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script>
